<template>
  <view class="page_view">
    <!--  <view class="back" @click="backTo">
      <view class="back-aim"> </view>
    </view> -->
    <!-- <view class="" v-if="userCodeStore == 1"> -->
    <view class="">
      <!-- 头部轮播背景 -->
      <view class="banner_box pr">
        <swiper
          style="height: 612rpx"
          :current="swiperIndex"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image :src="item.compound_img" class="swiper-item_banner"></image>
          </swiper-item>
        </swiper>
        <image
          style="width: 680rpx; position: absolute; top: 20rpx; left: 35rpx"
          mode="widthFix"
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/merge/yun.png"
        />
        <!-- 切换按钮 -->
        <!-- 左 -->
        <view class="banner_left_btn" @click="swiperSum">
          <image src="https://ojqn.wm2177.com/wechat_imgs/merge/left.png" />
        </view>
        <!-- 右 -->
        <view class="banner_right_btn" data-num="add" @click="swiperSum">
          <image src="https://ojqn.wm2177.com/wechat_imgs/merge/right.png" />
        </view>
        <!-- 底部显示 -->
        <view class="banner_title">
          <view class="top_box">
            {{ bannerList[swiperIndex].goods_name || '--' }}
          </view>
          <view class="bottom_box">
            <view style="padding-left: 20rpx" class=""
              >参考价：￥{{ bannerList[swiperIndex].price }}</view
            >

            <view style="padding-right: 20rpx"
              ><span>{{
                bannerList[swiperIndex].num > 0 * 1
                  ? bannerList[swiperIndex].leftNum
                  : '无限制'
              }}</span
              >/ <span>{{ bannerList[swiperIndex].kc }}</span>
            </view>
          </view>
        </view>

        <!-- 规则记录按钮 -->
        <view class="router_lib_box">
          <view class="router_lib" style="margin-top: 0" @click="showRuleClick"
            >规则</view
          >
          <view class="router_lib" @click="linkTo">记录</view>
        </view>

        <!-- 购买记录 -->
      </view>
      <view class="progress-container">
        <view class="barBox">
          <ProgressBar
            :progress="sumPercentage"
            style="width: 100%; height: 30rpx"
          />
        </view>
        <view class="progress-tip"
          >{{ sumPercentage > 100 ? 100 : sumPercentage }}%</view
        >
      </view>
      <!-- 轮播下的滑动栏 -->
      <view class="" style="position: relative; margin-top: 20rpx">
        <scroll-view
          enable-flex="true"
          class="shop_list_box"
          scroll-x="true"
          :scroll-left="scrollLeft"
        >
          <view class="" style="display: flex; align-items: center">
            <view
              v-for="(item, index) in bannerList"
              :key="index"
              :class="{
                shop_list_item: true,
                shop_list_itemed: swiperIndex == index ? true : false,
              }"
              @click="shopItemClick(index)"
            >
              <img
                :src="item.compound_img"
                alt=""
                style="width: 100%; height: 100%; display: block"
              />
              <!-- <view v-if="swiperIndex == index" class="tips"></view> -->
            </view>
          </view>
        </scroll-view>

        <!-- 全部轮播按钮 -->
        <!--    <view class="fiexd_all" @click="isShowAllShopClick">
          <view class="fiexd_t1">
            <view style="position: relative; top: -10rpx">全部</view>
            <view style="writing-mode: horizontal-tb">{{
              bannerList.length
            }}</view>
          </view>
          <img
            src="https://ojqn.wm2177.com/wechat_imgs/merge/more.png"
            alt=""
            class="fiexd_tip"
          />
        </view> -->
      </view>

      <!-- 合成选项 -->
      <view class="shop_foot">
        <view class="shop_title"> 合成材料 </view>

        <scroll-view
          enable-flex="true"
          class="material_box"
          scroll-x="true"
          v-if="materialList && materialList.length > 0"
        >
          <view
            class="material_item"
            v-for="(item, index) in materialList"
            :key="index"
            @click="materialSum"
            @touchstart="touchStart"
            @touchend="touchEnd"
            @longtap="longSum"
            :data-index="index"
          >
            <view class="material_libs">
              <view
                class="lib_left lib_style"
                style="font-weight: bold"
                @click.native.stop="materialDel"
                :data-index="index"
                >—</view
              >
              <view class="lib_num lib_style">{{ item.selectSum }}</view>
            </view>
            <image :src="item.img" alt="" style="" />

            <view class="material_sum">{{ item.goods_num }}</view>
          </view>
        </scroll-view>
        <view class="btnBox" v-if="materialList && materialList.length > 0">
          <view class="addBtn" @click="addSelect">自动选择</view>
          <view class="delBtn" @click="delSelect">取消选择</view>
        </view>
        <view
          v-else
          class=""
          style="
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #986ef5;
            text-align: center;
            margin: 53rpx auto 0;
          "
        >
          <img
            src="https://ojqn.wm2177.com/wechat_imgs/merge/box.png"
            alt=""
            style="
              width: 229rpx;
              height: 176rpx;
              display: block;
              margin: 0 auto;
            "
          />
          暂无普通款，快去收集吧
        </view>
      </view>

      <!-- 立即合成按钮 -->

      <uni-popup ref="promptpopup" type="center">
        <view class="sub_pop">
          <view
            class="sub_pop_header"
            :style="[{ height: isHeCheng ? '220rpx' : '88rpx' }]"
          >
          </view>
          <view class="image" style="margin-top: 40rpx">
            <img
              :src="bannerList[swiperIndex].compound_img"
              alt=""
              style="
                width: 210rpx;
                height: 210rpx;
                display: block;
                margin: 0 auto;
                border-radius: 12rpx;
              "
            />
          </view>
          <view class="enh sub_pop_t2">{{
            bannerList[swiperIndex].goods_name
          }}</view>

          <view
            class="pop_scroll_list"
            style="border-radius: 24rpx; overflow: auto"
            v-if="!isHeCheng"
          >
            <view class="pop_scroll_banner"> </view>
            <scroll-view class=" " scroll-y="true" style="height: 210rpx">
              <view
                class="pop_scroll_item"
                v-for="(item, index) in materialList"
                :key="index"
                :data-index="index"
                v-show="item.selectSum > 0"
              >
                <img
                  :src="item.img"
                  alt=""
                  style="width: 61rpx; height: 61rpx; border-radius: 8rpx"
                />
                <view
                  class="enh sub_pop_t3"
                  style="text-align: center; width: 280rpx"
                  >{{ item.goods_name }}</view
                >
                <view class="sub_pop_t3">X{{ item.selectSum }}</view>
              </view>
            </scroll-view>
          </view>

          <view class="pop_btn_box" v-if="!isHeCheng">
            <view
              class="pop_can pop_btn"
              @click="sub_close"
              style="
                background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/Cancel.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></view>
            <view class="pop_sun pop_btn" @click="sub_Post"></view>
          </view>
          <view class="pop_btn_box" v-if="isHeCheng">
            <view
              class="pop_can pop_btn"
              @click="sun_hide"
              style="
                background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/take.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin: 0 auto;
              "
            ></view>
          </view>
        </view>
      </uni-popup>

      <!-- 全部商品 -->
      <!--  <uni-popup ref="allgoodspopup" type="bottom">
        <view class="" style="background: #1a133f">
          <view class="pr pop_shop_title">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/merge/all.png"
              style="width: 181rpx; height: 51rpx; margin: auto"
            ></image>
            <view class="pop_shop_title_c" @click="isShowAllShopClick"></view>
          </view>
          <scroll-view scroll-y="true" style="height: 1020rpx">
            <view class="shop_pop_list">
              <view
                class="shop_pop_item"
                v-for="(item, index) in bannerList"
                :key="index"
              >
                <img
                  :src="item.compound_img"
                  alt=""
                  style="
                    width: 316rpx;
                    height: 316rpx;
                    display: block;
                    margin: 20rpx auto;
                    border-radius: 14rpx;
                  "
                />
                <view class="shop_pop_item_t1">{{ item.goods_name }}</view>
                <view class="shop_pop_item_foot">
                  <view class="shop_pop_item_t3" @click="allShopBtn(index)"
                    >去合成</view
                  >
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </uni-popup> -->

      <!-- 合成规则 -->
      <uni-popup ref="rulepopup" type="bottom">
        <view class="" style="background: #1a133f">
          <view class="pr pop_shop_title">
            <image
              class=""
              src="https://ojqn.wm2177.com/wechat_imgs/merge/rule.png"
              style="width: 181rpx; height: 51rpx; margin: auto"
            ></image>
            <view class="pop_shop_title_c" @click="showRuleClick"></view>
            <!-- <view class="rule-content">
							<rich-text :nodes="ruleStrings"></rich-text>
						</view> -->
          </view>
          <scroll-view scroll-y="true" style="height: 70vh">
            <view
              style="
                width: 94%;
                margin: 0 auto;
                color: #aca1ea;
                padding-bottom: env(safe-area-inset-bottom);
              "
              class=""
            >
              <rich-text :nodes="ruleStrings"></rich-text>
            </view>
          </scroll-view>
        </view>
      </uni-popup>

      <view class="env_bar" style="height: 0rpx; display: inline-block"> </view>
      <!-- 合成按钮 -->
      <view class="dddddddddd">
        <view class="sub_btn" @tap.stop="sub_btn"></view>
        <view class="checked">
          <checkbox
            @tap.stop="changeAgree"
            style="transform: scale(0.8)"
            value="cb"
            :checked="agreeRule"
            activeBackgroundColor="#7863ff"
          />
          <view @click="showRuleClick" style="color: #b8a0e8"
            >同意合成相关服务协议></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'
  import ProgressBar from '@/components/ProgressBar.vue'
  export default {
    data() {
      return {
        swiperIndex: 0, //索引
        isSub: false, //合成弹出
        isShowAllShop: false, //全部弹出
        bannerList: [{ goods_name: '' }], //轮播数据
        sumPercentage: 0, //选中材料的百分比数值
        sumsShop: 0, //选中材料的数值
        // logList: [], //曾经购买
        num100: '100',
        materialList: [], //我的材料
        background: {
          background: 'rgba(0,0,0,0)',
        },
        showRule: false, //副文本展示
        rulesData: '',
        top: 0,
        isHeCheng: false,
        agreeRule: true,
        timer: '',
        scrollLeft: 0,
        ruleStrings: '', //合成规则
        userCodeStore: '',
      }
    },
    components: {
      ProgressBar,
    },
    methods: {
      backTo() {
        uni.navigateBack({ delta: 1 })
      },
      changeAgree() {
        this.agreeRule = !this.agreeRule
      },
      // 点击了合成物品
      shopItemClick(index) {
        this.swiperIndex = index
      },
      // 轮播索引变化
      swiperChange(e) {
        let { current, source } = e.detail
        this.swiperIndex = current
        this.delSelect()
      },
      //
      swiperSum(e) {
        let add = ''
        if (e.currentTarget && e.currentTarget.dataset.num) {
          add = true
        }
        if (add && this.swiperIndex < this.bannerList.length - 1) {
          this.swiperIndex = this.swiperIndex + 1
        } else if (!add && this.swiperIndex > 0) {
          this.swiperIndex = this.swiperIndex - 1
        }
      },
      showRuleClick() {
        this.showRule = !this.showRule
        if (this.showRule) {
          this.$refs.rulepopup.open('bottom')
        } else {
          this.$refs.rulepopup.close('bottom')
        }
      },
      handleBack() {
        uni.navigateBack()
      },
      handleHome() {
        uni.switchTab({
          url: '/pages/home/home',
        })
      },
      // 获取轮播奖品数据
      async getPageData() {
        let res = await http.request({
          url: '/api/compound/compoundList',
          method: 'POST',
          data: {},
        })
        console.log(res)
        if (res.st == 1) {
          this.bannerList = res.data.goods
          // this.logList = res.data.log
          // console.log(this.logList,'77777777777777777777777777777')
        }
      },
      // 获取我的材料
      async getMaterialList() {
        let res = await http.request({
          url: '/api/compound/materialList',
          method: 'POST',
          data: {
            page: 1,
            limit: 50,
          },
        })
        if (res.st == 1) {
          for (let index = 0; index < res.data.length; index++) {
            res.data[index]['selectSum'] = 0
          }
          this.materialList = res.data
          console.log(this.materialList)
        }
      },
      sub_btn() {
        if (!this.agreeRule) {
          uni.utils.toast('请同意相关协议')
          return
        }
        if (this.sumsShop * 1 < this.bannerList[this.swiperIndex].sum * 1) {
          uni.utils.toast('合成进度未到达100%')
          return
        }
        this.$refs.promptpopup.open('center')
        this.isHeCheng = false
      },
      sub_close() {
        this.$refs.promptpopup.close('center')
      },
      sun_hide() {
        this.$refs.promptpopup.close('center')
        this.isHeCheng = false
      },
      // 更改合成材料
      materialSum(e) {
        let index
        if (e.currentTarget) {
          index = e.currentTarget.dataset.index
        } else {
          index = e
        }
        let data = this.materialList[index]
        console.log(this.sumsShop)
        if (data.is_compound != '1') {
          uni.showToast({
            title: '该材料不能参与合成',
            icon: 'none',
          })
          return
        }
        if (
          this.sumsShop + data.compound_price * 1 >=
          this.bannerList[this.swiperIndex].sum * 1.05
        ) {
          uni.showToast({
            title:
              '当前商品勾选后会超出合成所需材料，请重新选择数量或选择其他商品。',
            icon: 'none',
          })
          return
        }
        if (this.sumsShop * 1 >= this.bannerList[this.swiperIndex].sum * 1) {
          uni.showToast({
            title: '合成进度已到达100%',
            icon: 'none',
          })
          return
        }

        if (data.selectSum < data.goods_num) {
          data.selectSum = data.selectSum * 1 + 1
          this.sumsShop = data.compound_price * 1 + this.sumsShop * 1
        }
        this.upSelect()
        // e.stopPropagation()
      },
      touchStart(e) {
        this.timer = setInterval(() => {
          this.materialSum(e.currentTarget.dataset.index)
        }, 100)
      },
      touchEnd() {
        clearInterval(this.timer)
      },
      longSum(e) {
        let index = e.currentTarget.dataset.index
        console.log(index)
      },
      materialDel(e) {
        let index = e.currentTarget.dataset.index
        if (!this.materialList[index].selectSum) {
          return
        }
        if (this.materialList[index].selectSum > 0) {
          this.materialList[index].selectSum =
            this.materialList[index].selectSum * 1 - 1
          this.sumsShop =
            this.sumsShop * 1 - this.materialList[index].compound_price * 1
        }
        this.upSelect()
        e.stopPropagation()
      },
      delSelect() {
        for (let index = 0; index < this.materialList.length; index++) {
          this.materialList[index].selectSum = 0
        }
        this.sumPercentage = 0
        this.sumsShop = 0
        this.upSelect()
      },
      addSelect() {
        uni.utils.toast('已自动选择兑换商品，请自行核对、调整商品数量。')
        for (let index = 0; index < this.materialList.length; index++) {
          if (this.sumsShop * 1 >= this.bannerList[this.swiperIndex].sum * 1) {
            console.log('zje')
            this.upSelect()
            return
          }
          // 如果现在总价大于需要价格变成负数
          //并且所选价格总额不能大于105%
          if (
            this.bannerList[this.swiperIndex].sum * 1 * 1.05 - this.sumsShop <
            0
          ) {
            return
          }
          if (
            this.sumsShop + this.materialList[index].compound_price * 1 >=
            this.bannerList[this.swiperIndex].sum * 1.05
          ) {
            continue
          }
          //负数这边出现的
          //所需个数（向下取整）
          let needSum = Math.floor(
            (this.bannerList[this.swiperIndex].sum * 1 - this.sumsShop) /
              (this.materialList[index].compound_price * 1)
          )

          if (
            parseInt(
              ((this.bannerList[this.swiperIndex].sum * 1.05 - this.sumsShop) /
                this.materialList[index].compound_price) *
                1
            ) >
            this.materialList[index].goods_num * 1
          ) {
            this.materialList[index].selectSum =
              this.materialList[index].goods_num * 1
            this.sumsShop =
              this.materialList[index].selectSum *
                (this.materialList[index].compound_price * 1) +
              this.sumsShop
          } else {
            // 商品数值小(向下取整),如果加不大于设置数额+1
            //已经>100%不需要+1
            if (
              this.materialList[index].compound_price * (needSum + 1) +
                this.sumsShop <=
                this.bannerList[this.swiperIndex].sum * 1.05 &&
              this.materialList[index].compound_price * needSum +
                this.sumsShop <
                this.bannerList[this.swiperIndex].sum
            ) {
              ++needSum
            }
            this.materialList[index].selectSum = needSum
            this.sumsShop =
              this.materialList[index].selectSum *
                1 *
                (this.materialList[index].compound_price * 1) +
              this.sumsShop
          }
          this.upSelect()
        }
      },
      upSelect() {
        let sums =
          ((this.sumsShop * 1) / (this.bannerList[this.swiperIndex].sum * 1)) *
          100
        console.log(sums)
        this.sumPercentage = Number(sums.toFixed(2))
      },
      // 提交合成材料
      async sub_Post() {
        let goods_data = []
        if (this.bannerList[this.swiperIndex].kc <= '0' * 1) {
          uni.utils.toast('库存不足，无法继续合成')
          return
        }
        if (
          this.bannerList[this.swiperIndex].num > 0 &&
          this.bannerList[this.swiperIndex].leftNum == '0'
        ) {
          uni.utils.toast('可合成次数不够啦，无法合成')
          return
        }
        for (let index = 0; index < this.materialList.length; index++) {
          if (this.materialList[index].selectSum > 0) {
            goods_data.push({
              goods_id: this.materialList[index].goods_id,
              num: this.materialList[index].selectSum,
            })
          }
        }
        let data = {
          id: this.bannerList[this.swiperIndex].id,
          goods_data: goods_data,
        }
        let res = await http.request({
          url: '/api/compound/compoundPost',
          method: 'POST',
          data,
        })
        if (res.st == 1) {
          this.isHeCheng = true
          uni.utils.toast(res.msg)
          this.sumPercentage = 0
          // this.sub_btn()
          this.getPageData()
          this.getMaterialList()
          this.delSelect()
        } else {
          uni.utils.toast(res.msg)
        }
      },

      // 全部显示被点击
      // isShowAllShopClick() {
      //   this.isShowAllShop = !this.isShowAllShop
      //   if (this.isShowAllShop) {
      //     this.$refs.allgoodspopup.open('bottom')
      //   } else {
      //     this.$refs.allgoodspopup.close('bottom')
      //   }
      // },
      allShopBtn(index) {
        this.scrollLeft = index * 76
        // this.isShowAllShopClick()
        this.swiperIndex = index
      },

      linkTo() {
        uni.navigateTo({
          url: '/mergePage/mergelog/index',
        })
      },
      // 规则
      // async getRulesContent() {
      // 	let data = {
      // 		id: '33',
      // 	}
      // 	let res = await http.request({ url: 'api/getData', data })
      // 	if (res.st == 1) {
      // 		this.rulesData = res.data.details
      // 	}
      // },
      async getRules(id) {
        let res = await http.request({
          url: '/api/index/getDetails',
          method: 'POST',
          data: {
            id: id,
          },
        })
        console.log(res)
        this.ruleStrings = res.data.details
      },
    },
    onShareAppMessage() {
      return {
        title: '奖品进阶，快乐翻倍！',
        path: 'mergePage/merge/index',
      }
    },
    onLoad(option) {
      this.userCodeStore = useUsercodeStore().usercode.isTrans
      this.getPageData()
      this.getMaterialList()
      // this.getRulesContent()
      this.getRules(1)
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.navHeight = menuButtonInfo.height
      this.top = menuButtonInfo.top
    },
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .page_view {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    font-family: OPPOSans;
  }

  .banner_box {
    /*   background: url('https://ojqn.wm2177.com/wechat_imgs/merge/head.png')
      no-repeat; */
    background-size: 100%;
    height: 632rpx;
    position: relative;
  }

  .banner_left_btn {
    position: absolute;
    top: -120rpx;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 42rpx;
    height: 37rpx;
    box-sizing: content-box;
    padding: 31rpx;
    image {
      width: 59rpx;
      height: 55rpx;
    }
  }

  .banner_right_btn {
    position: absolute;
    top: -120rpx;
    bottom: 0;
    margin: auto;
    right: 0;
    width: 42rpx;
    padding: 31rpx;
    height: 37rpx;
    box-sizing: content-box;
    image {
      width: 59rpx;
      height: 55rpx;
    }
  }

  .banner_title {
    /* height: 91rpx; */
    /* background-color: rgba(0,0,0,0.6); */
    color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -165rpx;
    bottom: 0;
    width: 330rpx;
    height: 80rpx;
    opacity: 1;
    border-radius: 10rpx;
    border: 4rpx solid #740b00;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    .top_box {
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(116, 11, 0, 1);
    }
    .bottom_box {
      font-size: 20rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #b8a0e8;
    }
  }

  // .banner_title .t1 {
  //   font-family: OPPOSans;
  //   font-weight: bold;
  //   font-size: 30rpx;
  //   color: #fff;
  //   line-height: 30rpx;
  //   height: 30rpx;
  //   width: 550rpx;
  //   margin: 21rpx auto 20rpx;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  //   overflow: hidden;
  //   text-align: center;
  // }

  // .banner_title .t2_box {
  //   display: flex;
  //   justify-content: space-between;
  //   width: 500rpx;
  //   margin: 0 auto;
  //   font-family: OPPOSans;
  //   font-weight: 500;
  //   font-size: 22rpx;
  //   line-height: 22rpx;
  // }

  // .t2_box .t2_z {
  //   width: 1rpx;
  //   background-color: #fff;
  //   height: 22rpx;
  // }

  .swiper-item_banner {
    width: 332rpx;
    height: 448rpx;
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom: 103rpx;
    left: 0;
    right: 0;
  }

  /* 轮播下的滑动框 */
  .shop_list_box {
    /* width: 100%; */
    height: 200rpx;
    padding: 0rpx 100rpx 0rpx 0rpx;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    flex-wrap: nowrap;
  }

  .shop_list_item {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/merge/img-border.png')
    //   no-repeat;
    // background-size: 100%;
    width: 124rpx;
    height: 168rpx;
    /* box-sizing: ; */
    margin-left: 15rpx;
    flex-shrink: 0;
    display: inline-flex;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
    border: 4rpx solid #fff;
    /* 36rpx */
  }

  // .shop_list_item:nth-child(1) {
  //   margin-left: 30rpx;
  // }

  // .shop_list_item:last-child {
  //   margin-right: 30rpx;
  // }
  .shop_list_itemed {
    border: 4rpx solid #ff8d1a;
    box-shadow: 0px 1px 4px #ff8d1a;
  }
  .shop_list_item .tips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -36rpx;
    width: 0rpx;
    height: 0rpx;
    margin: 0 auto;
    border-style: solid;
    border-width: 18rpx;
    border-color: transparent transparent #432092 transparent;
  }

  .shop_list_item_title {
    width: 100%;
    height: 29rpx;
    position: absolute;
    bottom: 0;
    background: #f7d5b5;
    text-align: center;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    font-weight: 500;
    font-size: 20rpx;
    color: #000000;
  }

  /* 轮滑下边的框 */
  .shop_foot {
    width: 730rpx;
    height: 486rpx;
    /* height: 456rpx; */
    // background: linear-gradient(0deg, #1a133f, #462198);
    border-radius: 19rpx;
    margin: 0 auto;
    padding-bottom: 20rpx;

    border: 4rpx solid #b8a0e8;
  }
  .shop_title {
    background: #b8a0e8;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 500;
    font-weight: 600;
    font-size: 34rpx;
    color: #fff;
  }
  .btnBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20rpx;
    view {
      width: 240rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      opacity: 1;
      border-radius: 13px;
      font-size: 30rpx;
    }
    .addBtn {
      border: 2px solid #b8a0e8;
      color: #b8a0e8;
    }
    .delBtn {
      border: 2px solid #a2a2a2;
      color: #a2a2a2;
    }
    // .btn1 {
    //   font-weight: 500;
    //   font-size: 22rpx;
    //   color: #fff;
    //   line-height: 49rpx;
    //   width: 112rpx;
    //   background: linear-gradient(0deg, #e06df0, #d538ec);
    //   box-shadow: 2rpx 3rpx 3rpx 0rpx rgba(139, 72, 11, 0.54);
    //   border-radius: 24rpx 0rpx 0rpx 24rpx;
    //   opacity: 0.97;
    //   text-align: center;
    // }
  }
  // .shop_foot_title1 {
  //   margin: 20rpx 25rpx;
  //   font-weight: bold;
  //   font-size: 28rpx;
  //   color: #fff;
  //   line-height: 28rpx;
  // }

  .progress-container {
    width: 638rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10rpx auto;
    .barBox {
      width: 90%;
      height: 30rpx;
      border-radius: 12rpx;
      margin: 0 auto;
      position: relative;
    }
  }

  // .shop_foot_title2 {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   margin-top: 19rpx;
  //   margin-bottom: 40rpx;
  // }

  // .shop_foot_title2 .t1 {
  //   font-family: PingFang SC;
  //   font-weight: bold;
  //   font-size: 28rpx;
  //   color: #fff;
  //   line-height: 28rpx;
  //   margin-left: 25rpx;
  // }

  .material_box {
    margin-top: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 185rpx;
    display: flex;
  }

  .material_item {
    width: 124rpx;
    // imgwid:
    margin-right: 60rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* box-sizing: border-box; */
    // display: flex;
    // align-items: center;
    // justify-content: center;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 10rpx;
    image {
      width: 90rpx;
      height: 128rpx;
      display: inline-block;
      border-radius: 10rpx;
    }
  }

  .material_item:nth-child(1) {
    margin-left: 22rpx;
  }

  .material_libs {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .lib_style {
    font-weight: bold;
    font-size: 22rpx;
    color: #090401;
    line-height: 38rpx;
    width: 38rpx;
    background: linear-gradient(0deg, #b392fc, #b392fc);
    border-radius: 50%;
    text-align: center;
    /* margin-top: -8rpx; */
  }

  .lib_left {
    margin-left: -12rpx;
  }

  .lib_num {
    margin-right: -12rpx;
  }

  .material_sum {
    margin-top: 10rpx;
    background: #e4d6ff;
    border-radius: 10rpx;
    width: 124rpx;
    line-height: 24rpx;
    height: 24rpx;
    font-size: 18rpx;
    color: #7e56d4;
    // position: absolute;
    bottom: 0;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 22rpx;
    color: #1a133f;
    text-align: center;
  }

  .sub_btn {
    width: 632rpx;
    height: 92rpx;
    /* z-index: 2;
  position: fixed;
  bottom: 25; */
    /* background: linear-gradient(0deg, #ECBF8E, #E9B98D, #F7E4D3); */
    background: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/merge/subBtn.png')
      no-repeat;
    background-size: 100%;
    text-align: center;
    font-family: OPPOSans;
    font-weight: 800;
    font-size: 38rpx;
    color: #9146a0;
    padding-top: 20rpx;
    margin-top: 52rpx;
    /* margin:  80rpx 30rpx auto; */
  }

  .checked {
    positon: fixed;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
  }

  .checked view {
    font-size: 20rpx;
    color: #fff;
  }
  ::v-deep .checked uni-checkbox .uni-checkbox-input {
    border-radius: 50% !important;
  }

  .env_bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .router_lib_box {
    position: absolute;
    right: 0rpx;
    top: 30rpx;
  }

  .router_lib {
    background: linear-gradient(0deg, #6639ce, #714fb4);
    border-radius: 40rpx;
    line-height: 50rpx;
    width: 107rpx;
    height: 50rpx;
    text-align: center;
    box-sizing: content-box;
    margin: 20rpx 30rpx;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #fff;
  }

  .sub_pop {
    /* background: #FBF1E9; */
    background: url('https://ojqn.wm2177.com/wechat_imgs/merge/sub_pop.png')
      no-repeat;
    background-size: 100%;
    /* border-radius: 38rpx 38rpx 30rpx 30rpx; */
    width: 750rpx;
    height: 931rpx;
    margin: 0 auto;
    padding-bottom: 35rpx;
  }

  .sub_pop_header {
    text-align: center;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 38rpx;
    color: linear-gradient(to bottom, #f9ece0, #ebbb8d);
    text-shadow: 0rpx 5rpx 7rpx rgba(16, 16, 16, 0.28);
    /* background: linear-gradient(0deg, #F9ECE0 0%, #EBBB8D 100%); */
    position: relative;
    width: 313rpx;
    height: 88rpx;
    /* background-image: url(https://cc.wm2177.com/wechat_img/blackgold/hecheng/success.png); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto 23rpx;
  }

  .sub_pop_t2 {
    width: 480rpx;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 30rpx;
    color: #292a2a;
    line-height: 30rpx;
    margin: 28rpx auto 20rpx;
    text-align: center;
  }

  .sub_pop_t3 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }

  .pop_scroll_list {
    width: 510rpx;
    height: 280rpx;
    margin: 0 auto;
  }

  .pop_scroll_banner {
    width: 226rpx;
    height: 67rpx;
    line-height: 40rpx;
    font-family: OPPOSans;
    font-weight: bold;
    font-size: 24rpx;
    color: linear-gradient(to bottom, #f9ece0, #ebbb8d);
    margin-bottom: 10rpx;
    text-shadow: 0rpx 5rpx 7rpx rgba(16, 16, 16, 0.28);
    margin: 0 auto;
    text-align: center;
    position: relative;
    background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/now.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pop_scroll_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 18rpx;
    padding-right: 14rpx;
    border-bottom: 2rpx dashed rgba(55, 55, 55, 0.3);
    margin-top: 10rpx;
    padding-bottom: 10rpx;
  }

  .pop_scroll_item:nth-child(1) {
    margin-top: 0;
  }

  .pop_scroll_item:last-child {
    border-bottom: none;
  }

  .pop_btn_box {
    padding-left: 120rpx;
    padding-right: 120rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 31rpx;
    /* height: 76rpx; */
  }

  .pop_btn {
    width: 244rpx;
    line-height: 83rpx;
    height: 83rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
    background-image: url(https://ojqn.wm2177.com/wechat_imgs/merge/Confirm.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pop_shop_title {
    /* font-family: PingFang SC; */
    /* font-weight: bold; */
    /* font-size: 41rpx; */
    /* color: #FFFFFF; */
    line-height: 100rpx;
    /* background:url(https://ojqn.wm2177.com/wechat_imgs/merge/all.png); */
    /* margin-left: 260rpx; */
    width: 100%;
    height: 51rpx;
    /* 	background: linear-gradient(0deg, #F7E4D3 0%, #E9B98D 46.484375%, #ECBF8E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
    text-align: center;
    padding-top: 32rpx;
    padding-bottom: 90rpx;
  }

  .pop_shop_title_c {
    position: absolute;
    top: 29rpx;
    line-height: 31rpx;
    right: 29rpx;
    font-size: 41rpx;
    /* color: #FFFFFF; */
    /* background: linear-gradient(0deg, #F7E4D3 0%, #E9B98D 46.484375%, #ECBF8E 100%); */
    background: url(https://ojqn.wm2177.com/wechat_imgs/merge/close.png);
    width: 51rpx;
    height: 46rpx;
    background-size: 100% 100%;
  }

  .shop_pop_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 15rpx;
  }

  .shop_pop_item {
    background: #2a2254;
    width: 356rpx;
    /* height: 468rpx; */
    margin-bottom: 50rpx;
    border-radius: 11rpx;
  }

  .shop_pop_item_t1 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
    width: 320rpx;
    height: 70rpx;

    margin-top: 30rpx;
    margin-left: 30rpx;
    margin-bottom: 24rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .shop_pop_item_foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .shop_pop_item_t2 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #f7d5b5;
  }

  .shop_pop_item_t3 {
    margin-left: 30rpx;
    margin-bottom: 24rpx;
    width: 119rpx;
    line-height: 46rpx;
    text-align: center;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #7f66b8;
    background: linear-gradient(0deg, #2a2254, #2a2254);
    border: 1rpx solid #7f66b8;
    border-radius: 23rpx;
  }

  .fiexd_all {
    width: 100rpx;
    height: 140rpx;
    padding: 10rpx 0;
    /* background: linear-gradient(0deg, #ECBF8E, #E9B98D, #F7E4D3); */
    background-color: #271f53;
    border-radius: 15rpx 0rpx 0rpx 15rpx;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: absolute;
    top: 18rpx;
    right: 0;
  }

  .fiexd_t1 {
    margin-left: 20rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 26rpx;
    color: #aca1ea;
    writing-mode: vertical-rl;
    padding-left: 8rpx;
    /* margin-left:20rpx; */
    margin-right: 6rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-align: center;
    width: 40rpx;
    /* flex-direction: column; */
  }

  .fiexd_t1 view {
    /* width: 40rpx; */
    font-size: 26rpx;
    text-align: center;
    /* line-height: 40rpx; */
    white-space: nowrap;
  }

  .fiexd_tip {
    width: 18rpx;
    height: 20rpx;
    /* margin-right: -7rpx; */
  }

  .enh {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .homeicon {
    width: 37rpx;
    height: 37rpx;
  }

  .dddddddddd {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 1;
    /* background: url(https://ojqn.wm2177.com/wechat_imgs/merge/tab.png); */
    background-size: 100%;
    width: 750rpx;
    height: 242rpx;
  }
</style>
